<template>
	<div class="song-list-details">
		<div class="details-hd">
			<el-row>
				<el-col class="img">
					<img :src="songListDetails.imgurl" alt="" />
				</el-col>
				<el-col class="content">
					<div class="title">
						<el-row>
							<el-col
								:span="23"
								class="special-name"
								:title="songListDetails.specialname"
							>
								{{ songListDetails.specialname }}
							</el-col>
							<el-col :span="1" class="play-count">
								播放量：{{ songListDetails.playcount }}
							</el-col>
						</el-row>
					</div>
					<div class="nickname">
						<img :src="songListDetails.user_avatar" />
						<span>{{ songListDetails.nickname }}</span>
					</div>
					<div class="tag">
						<div class="tag-title">分类：</div>
						<div
							class="tag-item"
							v-for="item of songListDetails.tags"
							:key="item.tagid"
						>
							{{ item.tagname }}
						</div>
					</div>
					<div class="intro">
						<div class="intro-title">简介：</div>
						<div
							class="intro-content"
							:title="songListDetails.intro"
						>
							{{ songListDetails.intro }}
						</div>
					</div>
					<div class="means">
						<div class="btn play">
							<i>&#xe616;</i>
							播放
						</div>
						<div class="btn collect">
							<i>&#xe600;</i>
							收藏<em>{{ songListDetails.collectcount }}</em>
						</div>
						<div class="btn operate">
							<i>&#xe852;</i>
							批量操作
						</div>
						<div class="btn share">
							<i>&#xe6a5;</i>
							分享
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="details-bd">
			<el-row class="title">
				<el-col :xs="12" :sm="12" :md="12" :lg="14">歌曲名</el-col>
				<el-col :xs="12" :sm="12" :md="12" :lg="10">
					<el-row>
						<el-col :span="10">歌手</el-col>
						<el-col :span="12">专辑</el-col>
						<el-col :span="2">时间</el-col>
					</el-row>
				</el-col>
			</el-row>
			<el-row class="content" v-for="item of songList" :key="item.hash">
				<el-col :xs="12" :sm="12" :md="12" :lg="14" class="file-name">
					<span @click="getPlayMusic(item.hash)">
						{{ item.filename.split(" - ")[1] }}
					</span>
					<i @click="targetVideoDetails(item.mvhash)">{{
						item.mvhash ? "&#xe6af;" : ""
					}}</i>
				</el-col>
				<el-col :xs="12" :sm="12" :md="12" :lg="10">
					<el-row>
						<el-col :span="10" class="singer">
							<span> {{ item.filename.split(" - ")[0] }} </span>
						</el-col>
						<el-col :span="12" class="album">
							<span @click="targetAlbumDetails(item.album_id)">
								{{ item.remark }}
							</span>
						</el-col>
						<el-col :span="2" class="time">
							{{ item.duration }}
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			specialid: sessionStorage.getItem("specialid"),
			songListDetails: {},
			songList: [],
		};
	},
	methods: {
		// 获取歌单歌曲列表
		getSongList() {
			this.axios
				.get(`/api-song-list/list/${this.specialid}?json=true`)
				.then((res) => {
					res.data.info.list.imgurl = res.data.info.list.imgurl.replace(
						"/{size}",
						""
					);
					if (res.data.info.list.playcount / 10000 > 1) {
						res.data.info.list.playcount =
							(res.data.info.list.playcount / 10000)
								.toString()
								.split(".")[0] + "万";
					}
					if (res.data.info.list.collectcount / 10000 > 1) {
						res.data.info.list.collectcount =
							(res.data.info.list.collectcount / 10000)
								.toString()
								.split(".")[0] + "万";
					}
					res.data.list.list.info.forEach((item) => {
						item.duration = this.moment(
							item.duration * 1000
						).format("mm:ss");
					});
					this.songListDetails = res.data.info.list;
					this.songList = res.data.list.list.info;
				});
		},
		// 跳转到mv详情页面
		targetVideoDetails(videohash) {
			sessionStorage.setItem("videohash", videohash);
			this.$router.push(`/videoDetails/${videohash}`);
		},
		// 点击播放音乐
		getPlayMusic(hash) {
			this.$store.dispatch("updatePlayMusic", { hash: hash, this: this });
		},
		// 点击跳转到专辑详情
		targetAlbumDetails(albumid) {
			this.$router.push(`/albumDetails/${albumid}`);
		},
	},
	mounted() {
		this.getSongList();
	},
};
</script>
<style lang="scss">
.song-list-details {
	padding-right: 20px;
	.details-hd {
		.el-row {
			.img {
				width: 180px;
				height: 180px;
				cursor: pointer;
				img {
					width: 100%;
					height: 100%;
					border-radius: 20px;
					box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
				}
			}
			.content {
				width: calc(100% - 180px);
				padding-top: 10px;
				padding-left: 20px;
				.title {
					.el-row {
						padding-right: 80px;
						.el-col {
							font-size: 25px;
							font-weight: 700;
							color: #333;
							&.special-name {
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								padding-right: 20px;
							}
							&.play-count {
								line-height: 25px;
								white-space: nowrap;
								font-size: 12px;
								color: #858585;
								font-weight: normal;
							}
						}
					}
				}
				.nickname {
					margin-top: 10px;
					img {
						width: 18px;
						margin-right: 10px;
						border-radius: 50%;
					}
					span {
						font-size: 12px;
						color: #333;
					}
				}
				.tag {
					display: flex;
					margin-top: 10px;
					font-size: 12px;
					.tag-title {
						color: #858585;
					}
					.tag-item {
						display: flex;
						color: #5292fe;
						cursor: pointer;
						&:not(:last-child)::after {
							content: "";
							display: block;
							width: 1px;
							height: 12px;
							margin: 0 10px;
							background-color: #f5f5f5;
						}
					}
				}
				.intro {
					display: flex;
					margin-top: 10px;
					font-size: 12px;
					color: #858585;
					.intro-title {
						white-space: nowrap;
					}
					.intro-content {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.means {
					display: flex;
					margin-top: 30px;
					.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 110px;
						height: 32px;
						margin-right: 20px;
						border-radius: 16px;
						font-size: 14px;
						background-color: #efefef;
						cursor: pointer;
						i {
							font-family: "iconfont";
							font-size: 16px;
							margin-right: 5px;
						}
						&:hover {
							background-color: #e3e3e3;
						}
						&.play {
							color: #fff;
							background-image: linear-gradient(
								to right,
								#84b2fe,
								#5192fe
							);
							&:hover {
								background-image: linear-gradient(
									to right,
									transparent,
									transparent
								);
								background-color: #5192fe;
							}
						}
						&.collect {
							color: #fff;
							background-image: linear-gradient(
								to right,
								#fc7a77,
								#fd4040
							);
							&:hover {
								background-image: linear-gradient(
									to right,
									transparent,
									transparent
								);
								background-color: #fd4040;
							}
							em {
								margin-left: 3px;
								transform: translateY(1px);
							}
						}
						&.operate {
							i {
								font-size: 19px;
							}
						}
						&.share {
							i {
								font-size: 14px;
							}
						}
					}
				}
			}
		}
	}
	.details-bd {
		margin-top: 50px;
		.title {
			height: 44px;
			font-size: 13px;
			color: #b4b4b4;
			padding: 0 20px;
			border-bottom: 1px solid #f5f5f5;
			.el-col {
				height: 44px;
				line-height: 44px;
			}
		}
		.content {
			height: 44px;
			font-size: 13px;
			color: #333;
			padding: 0 20px;
			.el-col {
				height: 44px;
				line-height: 44px;
				&.file-name {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					padding-right: 10px;
					i {
						position: absolute;
						font-family: "iconfont";
						font-size: 23px;
						color: #5192fe;
						margin-left: 5px;
						cursor: pointer;
						transform: translateY(1px);
					}
				}
				&.time {
					color: #b4b4b4;
				}
				&.singer {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					padding-right: 10px;
				}
				&.album {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					padding-right: 10px;
				}
				span {
					cursor: pointer;
					&:hover {
						color: #5192fe;
					}
				}
			}
			&:hover {
				background-color: #f9f9f9;
			}
		}
	}
}
</style>
